<template>
    <!-- 我的博客详情页，，首页展示跟这个页面一致 -->
    <div class="myBlogDetailShow">
        <div style="text-align:left">
            <router-link to="/myBlogList" style="text-decoration: none;color:black;" class="myBlogList">
                <span>&lt;返回上级</span>
            </router-link>
        </div>
        <div class="toLeft" style="margin-top:10px">
            <span style="font-weight:bold;font-size:25px;">{{articleTitle}}</span>
        </div>
        <div class="toLeft" style="margin-top:15px">
            <span v-if="original ==1" style="color:red;font-size:14px">原创</span>
            <span v-if="original ==2" style="color:#74CF88;font-size:14px">转载</span>

            <span style="margin-left:13px;color:#858595;font-size:14px" v-if="topShow1 == 2">置顶</span>

            <span style="margin-left:13px;color:#78A5F1;font-size:14px">{{username}}</span>

            <span style="margin-left:13px;color:#858595;font-size:14px">发布时间： {{update_date}}</span>

            <span style="margin-left:13px;color:#858595;font-size:14px">阅读数量：10000</span>
        </div>

        <!-- 内容 -->
        <mavon-editor style="margin-top:10px" class="md"  :value="detail" :subfield = "false"  :defaultOpen = "'preview'"  
            :toolbarsFlag = "false"  :editable="false"  :scrollStyle="true" :ishljs = "true" ></mavon-editor>

        <!-- 点赞/踩 -->
        <div style="margin-top:40px;text-align:center">
            <!-- 点赞 -->
            <i class="layui-icon layui-icon-praise" style="font-size: 30px; color: #1E9FFF ;cursor:pointer" @click="clickPraise(blogId,0,1)" v-if="praiseFlag == 0"></i>
            <!-- 取消点赞 -->
            <i class="layui-icon layui-icon-praise" style="font-size: 30px; color:red;cursor:pointer" @click="clickPraise(blogId,1,0)" v-if="praiseFlag == 1"></i>
            <!-- 踩 -->
            <i class="layui-icon layui-icon-tread" style="font-size: 30px; color: #1E9FFF ;margin-left:100px;cursor:pointer"  @click="clickPraise(blogId,2,3)" v-if="praiseDownFlag == 2"></i>
            <!-- 取消踩 -->
            <i class="layui-icon layui-icon-tread" style="font-size: 30px; color:gray;margin-left:100px;cursor:pointer"  @click="clickPraise(blogId,3,2)" v-if="praiseDownFlag == 3"></i>
        </div>
        
        <hr style="margin-top:20px">

        <!-- 评论内容 -->
        <div style="text-align:left;margin-top:30px">
            <div style="float:left;margin-top:10px">
                <img src="../../assets/head.jpg" alt="" width="30px" style="border-radius:50px;"> <!--头像图标-->
            </div>
            <div contenteditable="true" class="textarea" ref="comment"></div>
            <el-button type="primary" size="mini" style="float:left;margin-top:10px;margin-left:20px" @click="doComment()">评论</el-button>
        </div>

        <div style="clear:both;"></div>
        <!-- 评论列表 -->
        <ul>
            <li v-for="item in commentList">
                <div style="margin-left:20px">
                    <div style="float:left;margin-top:30px;">
                        <img src="../../assets/head.jpg" alt="" width="30px" style="border-radius:50px;"> <!--头像图标-->
                        <span style="margin-left:16px">{{item.comemnt.name}}</span>
                    </div>
                    <div style="float:right;margin-top:30px;margin-right:30px">
                        <span>举报</span>
                        <span style="margin-left:20px" @click="showCommentFlag(item.comemnt.id)">回复</span>
                    </div>

                </div>

                <div style="clear:both;"></div>

                <div style="text-align:left;margin-top:10px;margin-left:70px">
                    <span>{{item.comemnt.content}}</span>
                </div>

                <!-- 评论回复 -->
                <div  style="text-align:left;margin-left:50px;!important" v-if="commentFlag == item.comemnt.id">
                    <div contenteditable="true" class="textarea" ref="commentToComment"></div>
                    <el-button type="primary" size="mini" style="float:left;margin-top:10px;margin-left:20px" @click="doCommentToComment(item.comemnt.id,item.comemnt.name)">评论</el-button>
                </div>

                <div style="clear:both;"></div>
                
                <!--评论的评论列表-->
                <div style="text-align:left;margin-left:80px;margin-top:20px">
                        <ul>
                            <li v-for="item2 in item.commentToComment">
                                <div style="float:left;margin-top:30px;">
                                    <img src="../../assets/head.jpg" alt="" width="30px" style="border-radius:50px;"> <!--头像图标-->
                                    <span style="margin-left:16px">{{item2.username}}</span>
                                </div>

                                <div style="float:right;margin-top:30px;margin-right:30px" @click="showCommentToCommentFlag(item2.id)">
                                    回复
                                </div>

                                <div style="margin-left:50px;margin-top:20px;clear:both;">
                                   <span style="color:blue"> {{item2.username}} </span> 
                                   回复 
                                   <span style="color:blue">{{item2.to_username}}</span> ：{{item2.content}}
                                </div>
                                
                                <!-- 回复评论 -->
                                <div  style="text-align:left;margin-left:30px;!important;clear:both;" v-if="commentToCommentFlag == item2.id">
                                    <div contenteditable="true" class="textarea" ref="commentToCommentToComment"></div>
                                    <el-button type="primary" size="mini" style="float:left;margin-top:10px;margin-left:20px" @click="doCommentToCommentToComment(item2.id,item2.comment_id,item2.username)">评论</el-button>
                                </div>

                                <div style="clear:both;"></div>

                                <ul>
                                    <li v-for="item3 in item2.subCommentList">
                                        <div style="float:left;margin-left:50px;margin-top:20px;clear:both;">
                                            <span style="color:blue"> {{item3.username}} </span> 
                                            回复 
                                            <span style="color:blue">{{item3.to_username}}</span> ：{{item3.content}}
                                        </div>

                                        <div style="clear:both;"></div>
                                    </li>
                                </ul>
                                
                            </li>
                        </ul>
                </div>

                <hr/>
            </li>
        </ul>
        



    </div>
</template>
<script>
import '../../layui/css/layui.css';
import layui from "../../layui/layui.js";
import storage from '@/router/storage.js'
export default {
    data(){
        return{
            'articleTitle':'',
            'original':'',
            'articleTypeList':[],
            'topShow1':'',
            'username':'',
            'update_date':'',
            'detail':'',
            'blogId':'',
            'praiseFlag':0,
            'praiseDownFlag':2,
            'commentList':[],
            'commentFlag':false, //博客 评论的评论框 标记
            'commentToCommentFlag':false, //博客 评论的评论的评论 标记
            'commentToCommentList':[]
        }
    },
    methods:{
        //评论的评论的评论
        doCommentToCommentToComment(id,comment_id,username){
            if(!this.$refs.commentToCommentToComment[0].textContent){
                this.$message({
                    type: 'warning',
                    message: '请填写评论内容'
                });
                return false;
            }
            var data = {
                'comment_id':id,
                'reply_id':comment_id,
                'reply_type':1,
                'comment':this.$refs.commentToCommentToComment[0].textContent,
                'name':this.username,
                'toName':username
            }

            this.axios.post("/comment/doCommentToComment",data).then(response =>{
                this.commentToCommentFlag = -1;
                this.getCommentList();
            }).catch(error => {
                this.$message({
                    type: 'warning ',
                    message: '异常'+error
                }); 
            });
        },

        //评论的评论
        doCommentToComment(id,name){
            if(!this.$refs.commentToComment[0].textContent){
                this.$message({
                    type: 'warning',
                    message: '请填写评论内容'
                });
                return false;
           }
            var data = {
                'comment':this.$refs.commentToComment[0].textContent,
                'name':this.username,
                'toName':name,
                'comment_id':id,
                'reply_type':1
            }
            this.axios.post("/comment/doCommentToComment",data).then(response =>{
                this.$refs.commentToComment = null;
                this.commentFlag = -1;
                this.getCommentList();
            }).catch(error => {
                this.$message({
                    type: 'warning ',
                    message: '异常'+error
                }); 
            });

        },

        //显示  评论的评论的评论 框
        showCommentToCommentFlag(id){
            this.commentToCommentFlag = id;
        },

        //显示 评论的评论框
        showCommentFlag(id){
            this.commentFlag = id;
        },
        //获取评论列表
        getCommentList(){
            var data = {
                'blogId':this.blogId
            }
            this.axios.post("/comment/getCommentList",data).then(response =>{
                console.log(9999)
                console.log(response.data.data)
                this.commentList = response.data.data;

            }).catch(error => {
                this.$message({
                    type: 'warning',
                    message: '异常'+error
                }); 
            });

        },

        //评论
        doComment(){
           if(!this.$refs.comment.innerHTML){
                this.$message({
                    type: 'warning',
                    message: '请填写评论内容'
                });
                return false;
           }
            if(this.username){
                var data = {
                    'comment':this.$refs.comment.innerHTML,
                    'blogId':this.blogId,
                    'name':this.username,
                    'type':1
                }
                this.axios.post("/comment/doComment",data).then(response =>{
                    console.log(response.data.data);
                    this.getCommentList();
                }).catch(error => {
                    this.$message({
                        type: 'warning ',
                        message: '异常'+error
                    }); 
                });

            }else{
                this.$message({
                    type: 'warning ',
                    message: '请先登录'
                }); 

                //模态框登录口 TODO
                this.$router.push({path:'/login'});
            }
            
        },

        //获取点赞、踩记录
        getPraise(blogId){
            if(this.username){
                    var data = {
                    blogId,
                    username:this.username,
                }
                this.axios.post("/article/getPraise",data).then(response =>{
                    if(response.data.data){
                        if(response.data.data.status == 0){
                            this.praiseFlag = 0;
                        }
                        if(response.data.data.status == 1){
                            this.praiseFlag = 1;
                            this.praiseDownFlag = 2;
                        }
                        if(response.data.data.status == 2){
                            this.praiseDownFlag = 2;
                        }
                        if(response.data.data.status == 3){
                            this.praiseDownFlag = 3;
                            this.praiseFlag = 0;
                        }

                    }else{
                        this.praiseFlag = 0; //如果当前没有点赞/取消点赞记录，默认设置
                        this.praiseDownFlag = 2;
                    }
                }).catch(error => {
                    this.$message({
                        type: 'warning ',
                        message: '异常'+error
                    }); 
                });
            }
            
        },

        //点赞、踩
        clickPraise(blogId,flag,status){
            if(this.username){
                var data = {
                    blogId,
                    flag,
                    type:1, //点赞类型  1-作品点赞
                    username:this.username,
                    status,
                }
                this.axios.post('/article/praise',data).then(response=> {
                    if(response.data.code == 500){
                        alert(response.data.message);
                    }else{
                        this.getPraise(this.blogId);
                    }
                }).catch(error => {
                    this.$message({
                        type: 'warning ',
                        message: '异常'+error
                    }); 
                });
            }else{
                this.$message({
                    type: 'warning ',
                    message: '请先登录'
                }); 

                //模态框登录口 TODO
                this.$router.push({path:'/login'});
            }


        },

        getMyArticleDetail(id){
            //根据id查询 博客详情
            this.axios.get('/article/getMyArticleDetail?id='+id).then(response=> {
                if(response.data.code == 500){
                    alert(response.data.message);
                }else{
                   console.log("根据id查询 博客详情")
                   console.log(response.data.data);
                    var infoCont = response.data.data;
                    this.articleTitle = infoCont.title;
                    this.original = infoCont.original == 1 ?"1":"2";    //是否原创    1-原创 0-转载       
                    this.topShow1 = infoCont.top == 1? "2":"1"; // 1-置顶   0-非置顶
                    this.originLink = infoCont.original_link;
                    this.private = infoCont.private_blog == 1?"2":"1";   //1-发布   0-草稿
                    this.update_date = infoCont.update_date;

                    var types = infoCont.type.split(",");
                    for(var i = 0;i<this.articleTypeList.length;i++){
                        for(var j = 0;j<types.length;j++ ){
                            if(types[j] == this.articleTypeList[i].name){
                                this.articleTypeList[i].flag = true;  //博客分类，哪些需要选中
                                this.articleTypes.push(this.articleTypeList[i].name);
                            }
                        }
                    } 

                    this.detail = infoCont.content;

                    }
                }).catch(error => {
                this.$message({
                        type: 'warning ',
                        message: '异常'+error
                    }); 
                });
        }
    },
    mounted(){
        this.username = storage.get("username");
        //博客id
        console.log(this.$route.params);
        this.blogId = this.$route.params.blogId;

        this.getPraise(this.blogId);
        this.getMyArticleDetail(this.blogId);
        this.getCommentList();
       
    }
}
</script>

<style scoped>
.toLeft{
   text-align:left !important
}
.textarea{
    float:left;
    margin-top:10px;
    width: 400px;
    min-height: 20px;
    max-height: 300px;
    margin-left: 20px;
    outline: 0;
    border: 1px solid #007FFF;
    font-size: 12px;
    line-height: 24px;
    padding: 2px;
    word-wrap: break-word;
    overflow-x: hidden;
    overflow-y: auto;
 
    border-color: #007FFF;
    /* box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); */
}
</style>